<template>
	<div
		class="aha-avatar"
		:style="{
			'width': `${props.size}px`,
			'height': `${props.size}px`,
		}"
	>
		<el-avatar
			:size="props.size"
			:src="props.src || LOGO"
			fit="cover"
		/>
	</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { LOGO } from '@/constants/index'

interface Props {
  size: number,
  src?: string | null
}

const props = withDefaults(defineProps<Props>(), {
  size: 40,
  src: LOGO
})
</script>

<style lang="scss" scoped>
.aha-avatar {
  display: inline-block;

  .el-avatar {
    background-color: transparent;
  }
}

</style>
